import React, {Component} from 'react';
import {Platform, StyleSheet, Text, TextInput, View, Image, AsyncStorage, Keyboard, Dimensions} from 'react-native';
import {List} from 'antd-mobile-rn';
import ImageView from "./ImageView";
import defaultAvatar from '../../assets/images/avatar_default.png';
import {replacePhone} from '../../utils/appUtils'
import appUtils from "../../utils/appUtils";
import {Actions} from "react-native-router-flux";
import MenuIconExpress from '../../assets/images/menu_icon_express.png'
import MenuIconShip from '../../assets/images/menu_icon_ship.png'
import MenuIconShare from '../../assets/images/menu_icon_share.png'
import MenuIconAccount from '../../assets/images/menu_icon_money.png'
import MenuIconSetting from '../../assets/images/menu_icon_setting.png'
import MenuIconExit from '../../assets/images/menu_icon_exit.png'

export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window').height;


// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;


export default class Menu extends Component {

    state = {
        phone: ""
    }

    componentDidMount() {
        this.setState({
            phone: "18523913545"
        })
    }

    renderHeader() {
        return (
            <View style={styles.header}>
                <ImageView style={styles.avatar} placeholder={defaultAvatar}
                           url="https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=806577fe7e8b4710d12ffbccf3ccc3b2/b64543a98226cffc24d3306db5014a90f703ea70.jpg"/>
                <Text style={styles.nickName}>{replacePhone(this.state.phone)}</Text>
            </View>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <List renderHeader={() => this.renderHeader()} >
                    <List.Item thumb={<Image
                        source={MenuIconShip}
                        style={{width: 29, height: 29}}
                    />}><Text style={styles.listItemTitle}>我的行程</Text></List.Item>
                    <List.Item thumb={<Image
                        source={MenuIconShare}
                        style={{width: 29, height: 29}}
                    />}><Text style={styles.listItemTitle}>我的拼车</Text></List.Item>
                    <List.Item thumb={<Image
                        source={MenuIconExpress}
                        style={{width: 29, height: 29}}
                    />}><Text style={styles.listItemTitle}>我的物流</Text></List.Item>
                    <List.Item thumb={<Image
                        source={MenuIconAccount}
                        style={{width: 29, height: 29}}
                    />}><Text style={styles.listItemTitle}>我的账户</Text></List.Item>
                    <List.Item thumb={<Image
                        source={MenuIconSetting}
                        style={{width: 29, height: 29}}
                    />}><Text style={styles.listItemTitle}>设置</Text></List.Item>
                </List>
                <View style={styles.footer}>
                    <Image source={MenuIconExit} style={styles.exitIcon}/>
                    <Text >退出登录</Text>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        height: "100%",
        width: "100%",
    },
    header: {
        height: 200,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
        borderBottomWidth: 1,
        borderBottomColor: "#e0e0e0"
    },
    nickName: {
        fontSize: 13,
        color: "#888888",
        marginTop: 12
    },
    avatar: {
        width: 72,
        height: 72,
        borderRadius: 36,
    },
    listItemTitle: {color: "#444", fontSize: 14, marginLeft: 10},
    footer:{
        height:44,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        marginTop: "auto",
        borderTopColor:"#e0e0e0",
        borderTopWidth: 1,
    },
    exitIcon :{
        width:29,
        height:29,
        marginRight: 10,

    }
});